<template>
	<view class="activityDetails">
        <SRV-topbar title="我的店铺" isLeft="true"></SRV-topbar>
		<view class="con2">
			<image class="con2-qrc" :src="info.cover" mode=""></image>
		</view>
		<view class="status-box" style="position: absolute;right: 160rpx;top: 380rpx;">
            <show-status :name="info.statusName" size="180" fontSize="50" boder="5" :color="info.statusColor "></show-status>
		</view>
		<view class="con1">
			<view class="con1-name"> {{info.title}} </view>
		</view>
        <view class="columbTitle" style="display: flex;">
            <view style="width: 35vw;"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/base.png" mode="aspectFill"></image>基础信息</view>
            <view style="width: 65vw;" class="btnList">
                <view v-for="(item, index) in info.buttonList" :key="index" @click="operateFun(item.type)">{{item.name}}</view>
            </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 联系人 </view>
            <view class="list-right"> {{info.username}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 联系电话 </view>
            <view class="list-right"> {{info.mobile}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 店铺类型 </view>
            <view class="list-right"> {{info.type}} {{info.consumeType}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 业务员 </view>
            <view class="list-right" @click="callPhone()"> {{info.salesmanName}} {{info.salesmanMobile}} </view>
        </view>
        <view class="list-box" v-if="info.status != 0 && info.status != 1">
            <view class="list-left"> 开通年份 </view>
            <view class="list-right"> {{info.tax_year}} </view>
        </view>
        <view class="list-box" v-if="info.status != 0 && info.status != 1">
            <view class="list-left"> 开通金额 </view>
            <view class="list-right"> {{info.tax_rate}} </view>
        </view>
        <view class="list-box" v-if="info.status == 0 || info.status == 1">
            <view class="list-left"> 店铺有效期 </view>
            <view class="list-right"> {{info.valid_time}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 营业执照 </view>
            <view class="list-right"> <image :src="info.logo" mode="" @tap="previewImage" :data-src="info.logo" style="width: 140rpx;height: 140rpx;"></image> </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 店铺地址 </view>
            <view class="list-right" @click="showMap()"> {{info.address}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 营业时间 </view>
            <view class="list-right"> {{info.start_business && info.end_business ? info.start_business + " - " + info.end_business : "未设置"}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 店铺公告 </view>
            <view class="list-right"> {{info.desc ? info.desc : "未设置"}} </view>
        </view>
        <view class="list-box">
            <view class="list-left"> 店铺组图 </view>
            <view class="list-right">  </view>
        </view>
        <scroll-view class="scroll" scroll-x="true" show-scrollbar="false">
        	<view class="scroll-item" v-for="(item, index) in info.imgList" :key="index">
        		<image :src="item.thumb" lazy-load="true"  @tap="previewImage" :data-src="item.imgUrl" data-id="0" mode=""></image>
        	</view>
        </scroll-view>
        
        <view class="columbTitle"  v-if="info.extensionInfo.length > 0"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/extend.png" mode="aspectFill"></image>数据统计</view>
		<view class="list-box" v-for="(item,index) in info.extensionInfo" :key="index" @click="jump(item.jumpType, item.jumpLink)">
			<view class="list-left"> {{item.title}} </view>
			<view class="list-right"> {{item.num}} </view>
		</view>
        <view class="bot" v-if="info.isClerk == 1">
        	<view class="txt1" :style="'height:' + bottomHeight + 'rpx;'">
        		<text @click="jump('clerkList')">店员列表（{{info.nowClerk}}）</text>
        	</view>
        </view>
		<uni-popup ref="showPayView" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>开通费用</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="payInfo.use_hdq > 0"  @click="setUseOther(1)">
					<text>使用互动券 {{payInfo.use_hdq}} 抵扣金额 ￥{{payInfo.use_hdq}}</text>
					<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(payInfo.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')">余额不足</text>
				</view>
				<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniQrcode from '../../static/wxqrcode.js';
    import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				bottomHeight: 110,
				/* 底部按钮高度，避免iPhonex导航黑条 */
				info: {
                    id: 0,
					title: '',
                    cover: '',
                    username: '',
                    mobile: '',
					status: 1,
					statusName: '',
					logo: '',
                    statusColor: '#fff',
                    close_info: '',
                    start_business: '',
                    end_business: '',
                    tax_rate: 0,
                    tax_year: '',
                    valid_time: '',
                    salesmanName: '',
                    salesmanMobile: '',
                    address: '',
                    longitude: '',
                    latitude: '',
                    consumeType: '',
                    type: '',
                    imgList: [],
                    buttonList: [],
					extensionInfo: []
				},
                imgList: [],
                payInfo : {
                    money: 600,
                    user_money: 0,
                    user_hdq: 0,
                    sure_hdq: 180,
                },
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    applyType: 'merchant_num',
                    is_use_hdq: 0,
                    payment_type: 1,
                    mid: 0,
                    openNum: 3,
                },
                isPay: true,
                pay_money: 0,
                use_hdq : 0,
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/member/merchant/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					},
                    v: '/v2'
				}).then(res => {
					if (res.code == 200) {
						_self.info = res.data;
                        _self.imgList = [];
                        if(_self.info.logo != "") {
                            _self.imgList.push(_self.info.logo);
                        }
                        if(_self.info.imgList.length > 0) {
                        	_self.info.imgList.forEach((imgItem, imgKey) => {
                        		_self.imgList.push(imgItem.imgUrl);
                        	});
                        }
                        _self.payInfo = res.data.payInfo;
                        if(_self.payInfo.isPay) {
                        	_self.payData.pay_type = _self.payInfo.pay_type;
                        	_self.payData.pay_id = _self.payInfo.pay_id;
                        	_self.calculationTotalMoney();
                        	return ;
                        }
                        return ;
					} 
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                        success() {
                            setTimeout(function() {
                                uni.redirectTo({
                                    url: '/pages/my/my'
                                });
                            }, 2000)
                        }
                    });
				});
			},
            callPhone() {
                uni.makePhoneCall({
                    phoneNumber: _self.info.salesmanMobile
                });
            },
			showMap() {
				uni.openLocation({
				    latitude: Number(_self.info.latitude),
				    longitude: Number(_self.info.longitude),
				    success: function (res) {
				        console.log(res);
				    }
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: _self.imgList
				})
			},
            operateFun(type) {
                if(type == 'editStore') {
                    uni.navigateTo({
                        url: '/pages/merchant/apply?applyType=editInfo'
                    });
                    return ;
                } else if (type == 'pay') {
                    _self.$refs.showPayView.open();
                    return ;
                }
            },
            setUseOther(type) {
            	if(type == 1) {
            		_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
            	} 
            	_self.calculationTotalMoney();
                _self.$forceUpdate();
            },
            selPayType(payType) {
            	if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
            		return ;
            	}
            	_self.payData.payment_type = payType;
                _self.$forceUpdate();
            },
            calculationTotalMoney() {
                _self.pay_money =  _self.payInfo.money;
                let totalHdq =  _self.payInfo.sure_hdq;
                if(totalHdq > 0 && _self.payInfo.user_hdq > 0) {
                    _self.use_hdq = _self.payInfo.user_hdq > totalHdq ? totalHdq : _self.payInfo.user_hdq;
                	if(_self.payData.is_use_hdq) {
                		_self.pay_money = Number(_self.pay_money) - Number(_self.use_hdq);
                	}
                }
                _self.$forceUpdate();
            },
			subPayForm() {
			    commonPay.payFun(_self.payData, _self, 2);
			},
			callbackFun() {
				_self.close();
				_self.getInfo();
			},
			close() {
				_self.$refs.showPayView.close();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			
		},
        onShow() {
            _self.getInfo();
        },
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.con1 {
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		justify-content: center;
	}
	.con1-name {
		text-align: center;
		line-height: 54rpx;
        font-size: 46rpx;
	}
	.con2 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	.con2-qrc {
		width: 300rpx;
		height: 300rpx;
	}
	.con3 {
		text-align: center;
		margin-top: 16rpx;
		padding: 20rpx;border-bottom: 2rpx solid #eaeaea;
	}
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 20rpx;
	}
    .list-right{
        width: 70vw;
    }
    
    .scroll {
    	width: 95%;
    	padding: 30upx 16upx;
    	white-space: nowrap;
        border-bottom: 16rpx solid #ddd;
    		
    	.scroll-item:first-child {
    		margin-left: 0upx;
    	}
    		
    	.scroll-item {
    		display: inline-flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		margin-left: 20upx;
    		font-size: 20upx;
    		
    		image {
    			width: 140upx;
    			height: 140upx;
    			border-radius: 20upx;
    		}
    		
    		text {
    			padding-top: 26upx;
    		}
    	}
    }
	.but1 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2b85e4;
		color: #fff;
	}

	.but2 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FFBC00;
		color: #fff;
	}

	.but3 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #dd6161;
		color: #fff;
	}
    .pickupCode-t{
        width: 100%;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        letter-spacing: 8rpx;
        font-size: 40rpx;
    }
    .btn{
        width: 100%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        color: #333333;
    }
    
    .columbTitle {
        padding: 20rpx;
        font-size: 40rpx;
        border-bottom: 2rpx solid #ccc;
        image {
        	width: 40upx;
        	height: 40upx;
            margin-right: 20rpx;
        }
    }
    .btnList {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        view {
            width: 20vw;
            text-align: center;
            border-radius: 10rpx;
            background-color: #FFBF0A;
            color: #fff;
            font-size: 36rpx;
            letter-spacing: 10rpx;
            margin-right: 10rpx;
        }
    }
    .pay_type {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 140upx;
    	max-height: 80vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 23upx;
    		height: 23upx;
    		right: 40upx;
    		top: 45upx;
    	}
    
    	.title {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    	}
    
    	.paypir {
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		// padding: 20upx 0upx 20upx;
    		font-size: 28upx;
    
    		text:last-child {
    			color: #FF5F60;
    			font-size: 50upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
    
    	.line2 {
    		width: 100%;
    		box-sizing: border-box;
    		padding: 36upx;
    		display: flex;
    		justify-content: space-between;
    		font-size: 28upx;
    		color: #333333;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    
    		.txt {
    			color: #999999;
    		}
    
    		.nosel {
    			width: 36upx;
    			height: 36upx;
    			border: 1upx solid rgba(60, 72, 104, 1);
    			border-radius: 50%;
    		}
    
    		.sel {
    			background-image: url(../../static/img/check.png);
    			background-repeat: no-repeat;
    			width: 40upx;
    			height: 40upx;
    			background-size: 100%;
    		}
			
			.nocheck {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 20%;
			}
			
			.check {
				background: url(../../static/img/checkbox_check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
    	}
    	.pay_bot {
    		width: 100%;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
        .bot {
            position: fixed;
            width: 100%;
            height: 100upx;
            bottom: 0upx;
            border-top: 1upx #EBECF0 solid;
            padding-bottom: env(safe-area-inset-bottom);
            background-color: #FFFFFF;
            .txt1 {
                box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
                width: 100%;
                height: 100%;
                background: #FFBF0A;
                color: #FFFFFF;
                font-size: 28upx;
                text-align: center;
                line-height: 100upx;
                display: flex;
                text {
                    background: #FFBF0A;
                    color: #FFFFFF;
                    height: 100upx;
                    line-height: 100upx;
                    width: 100%;
                }
            }
        }
</style>
